<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300"></canvas>
    <script type="text/javascript">
      window.onload = function() {
        // body...
        var canvas = document.getElementById('canvas');

        if (!canvas || !canvas.getContext) {
          return false;
        }

        var context = canvas.getContext('2d');

        // background
        context.fillStyle = 'pink';
        context.fillRect(0 , 0 , 400 , 300);

        // text
        context.fillStyle = 'blue';

        context.font = '20px Sans-Serif';
        context.textBaseLine = 'top';

        context.fillText('hello world', 150 , 50) ;

        // image
        var img = new Image();

        img.onload = function(){
          context.drawImage(img, 120 , 40);
        }

        img.src = 'image.gif';

        // border
        context.strokeStyle = 'black';
        context.strokeRect(5 , 5 , 390 ,  290);
      }
    </script>
  </body>
</html>
